<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<h:body>
<h:form id="form">  
  
    <p:growl id="msgs" showDetail="true" />  
  
    <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">  
  
        <p:column headerText="Model" style="width:24%">  
            <h:outputText value="#{car.model}" />  
        </p:column>  
  
        <p:column headerText="Year" style="width:24%">  
            <h:outputText value="#{car.year}" />  
        </p:column>  
  
        <p:column headerText="Manufacturer" style="width:24%">  
            <h:outputText value="#{car.manufacturer}" />  
        </p:column>  
  
        <p:column headerText="Color" style="width:24%">  
            <h:outputText value="#{car.color}" />  
        </p:column>  
  
        <p:column style="width:4%">  
                <p:commandButton id="selectButton" update=":form:display" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">  
                <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />  
            </p:commandButton>  
        </p:column>  
  
    </p:dataTable>  
  
    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"  
                showEffect="fade" hideEffect="explode" modal="true">  
  
        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  
  
            <f:facet name="header">  
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>  
            </f:facet>  
  
            <h:outputText value="Model:" />  
            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>  
  
            <h:outputText value="Year:" />  
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>  
  
  
            <h:outputText value="Manufacturer:" />  
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>  
  
            <h:outputText value="Color:" />  
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>  
  
        </h:panelGrid>  
  
    </p:dialog>  
  
</h:form>
</h:body>
</html>
